<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">切换</button>

    <!-- hidden属性 -->
    <div id="box" class="cba" title="aaa" style="color: red">哈哈哈哈哈</div>

    <script>
      // 1.获取元素
      var boxEl = document.querySelector("#box");
      var btnEl = document.querySelector(".btn");

      // 2.监听btn的点击
      btnEl.onclick = function () {
        // 1.只是隐藏
        // boxEl.hidden = true;
        // boxEl.style.display = "none";

        // 2.切换
        // boxEl.hidden = false;
        // if (boxEl.hidden === false) {
        //   boxEl.hidden = true;
        // } else {
        //   boxEl.hidden = false;
        // }

        // 3.直接取反
        boxEl.hidden = !boxEl.hidden;
      };
    </script>

    <!-- 属性: attribute(特性) -->
    <!-- 
    attribute的分类:
      1.如果是HTML标准制定的attribute, 称之为标准Attribute
      2.而自定义的Attribute, 称之为非标准Attribute 
   -->
    <!-- 元素中的属性称之为attribute -->
    <!-- 标准的attribute在对应的对象模型中都有对应的property -->
    <div id="abc" class="box" title="box" age="18" height="1.88">box1</div>
    <a href="https://www.baidu.com">百度一下</a>

    <div id="abc" class="box" title="box" age="18" height="1.88">box2</div>
    <input type="checkbox" checked /> 账号:

    <!-- <input type="checkbox" checked="checked" /> 账号: -->
    <input class="account" type="text" />
    <button class="btn">设置input的值</button>

    <script>
      var boxEl = document.querySelector(".box");

      // 1.所有的attribute都支持的操作
      // 大小写不敏感
      console.log(
        boxEl.hasAttribute("AGE"),
        boxEl.hasAttribute("abc"),
        boxEl.hasAttribute("id")
      );
      console.log(
        boxEl.getAttribute("AGE"),
        boxEl.getAttribute("abc"),
        boxEl.getAttribute("id")
      );

      boxEl.setAttribute("id", "cba");
      boxEl.removeAttribute("id");

      var boxAttributes = boxEl.attributes;
      for (var attr of boxAttributes) {
        console.log(attr.name, attr.value);
      }

      // 2.通过getAttribute()一定是字符串类型
      var inputEl = document.querySelector("input");
      console.log(inputEl.getAttribute("checked"));

      // 对象中的属性称之为property
      // var obj = {
      //   // property
      //   name: "Lily"
      // }
      // 1.通过property获取attribute的值
      // 获取box元素
      var boxEl = document.querySelector(".box");
      console.log("property", boxEl.id, boxEl.title, boxEl.age, boxEl.height);

      // input元素
      var inputEl = document.querySelector("input");
      // if (inputEl.getAttribute("checked")) { //获取的是个空字符串
      //   console.log("checkbox处于选中状态")
      // }
      if (inputEl.checked) {
        console.log("checkbox处于选中状态");
      }
      console.log(typeof inputEl.checked);

      // 2.attribute和property是相互影响的
      boxEl.id = "aaaaa";
      console.log(boxEl.getAttribute("id"));

      boxEl.setAttribute("title", "哈哈哈");
      console.log(boxEl.title);

      // 3.比较特殊的情况, input设置值(了解)
      var accountInputEl = document.querySelector(".account");
      var btnEl = document.querySelector(".btn");
      btnEl.onclick = function () {
        accountInputEl.setAttribute("value", "李四");
        // 优先级更高
        accountInputEl.value = "张三";
      };
    </script>
  </body>
</html>
